<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能分诊系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f0f8ff;
            margin: 0;
            padding: 0;
        }

        .header {
            background-color: #007cba;
            color: white;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        .input-section {
            margin-bottom: 20px;
        }

        textarea {
            width: 100%;
            height: 150px;
            padding: 12px;
            border: 2px solid #007cba;
            border-radius: 4px;
            resize: vertical;
            font-size: 16px;
            box-sizing: border-box;
        }

        .btn-container {
            text-align: center;
            margin: 20px 0;
        }

        button {
            background-color: #007cba;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #005a87;
        }

        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        .result-section {
            margin-top: 20px;
            padding: 20px;
            border-radius: 4px;
            background-color: #e8f4fc;
            border-left: 5px solid #007cba;
        }

        .result-content {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .response-time {
            font-size: 14px;
            color: #666;
            text-align: right;
        }

        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }

        .error {
            background-color: #ffebee;
            border-left-color: #f44336;
            color: #c62828;
        }

        .department {
            font-weight: bold;
            color: #007cba;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🏥 智能分诊系统</h1>
        <p>请输入您的症状描述，系统将为您推荐合适的科室</p>
    </div>

    <div class="container">
        <div class="input-section">
            <textarea id="textInput" placeholder="请详细描述您的症状，例如：&#10;• 发热、咳嗽、喉咙痛&#10;• 腹痛、腹泻&#10;• 头痛、头晕&#10;• 皮肤红肿、瘙痒&#10;..."></textarea>
        </div>

        <div class="btn-container">
            <button id="predictBtn" onclick="predict()">智能分诊</button>
        </div>

        <div id="resultArea"></div>
    </div>

    <script>
        async function predict() {
            const textInput = document.getElementById('textInput');
            const resultArea = document.getElementById('resultArea');
            const predictBtn = document.getElementById('predictBtn');

            const text = textInput.value.trim();

            if (!text) {
                alert('请输入症状描述');
                return;
            }

            // 记录开始时间
            const startTime = performance.now();

            // 显示加载状态
            predictBtn.disabled = true;
            resultArea.innerHTML = '<div class="loading">正在分析中，请稍候...</div>';

            try {
                // 调用后端API
                const response = await fetch('/predict', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ text: text })
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();

                // 计算响应时间
                const endTime = performance.now();
                const responseTime = (endTime - startTime).toFixed(2);

                // 显示结果
                resultArea.innerHTML = `
                    <div class="result-section">
                        <div class="result-content">
                            推荐科室：<span class="department">${data.predict_class || '未知科室'}</span>
                        </div>
                        <div class="response-time">
                            响应时间：${responseTime} 毫秒
                        </div>
                    </div>
                `;
            } catch (error) {
                console.error('预测出错:', error);

                // 计算响应时间
                const endTime = performance.now();
                const responseTime = (endTime - startTime).toFixed(2);

                resultArea.innerHTML = `
                    <div class="result-section error">
                        <div class="result-content">
                            分析失败：${error.message}
                        </div>
                        <div class="response-time">
                            响应时间：${responseTime} 毫秒
                        </div>
                    </div>
                `;
            } finally {
                predictBtn.disabled = false;
            }
        }

        // 添加回车键快捷提交功能
        document.getElementById('textInput').addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.key === 'Enter') {
                predict();
            }
        });
    </script>
</body>
</html>
